<template>
	<view>
		<u-navbar
			title="我的订单"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<view style="background-color: #fff;">
			<u-tabs :scrollable="false" @change="tabClick" :list="list1" :lineColor="appColor" :lineWidth="42" :activeStyle="{color: appColor}" :inactiveStyle="{color: '#333'}"></u-tabs>
		</view>
		<scroll-view @scrolltolower="onLower" :scroll-y="true" :style="{height: scrollViewHeight}">
			<template v-if="loading">
				<view style="padding: 32rpx;">
					<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="3" v-for="i in 8" :key="i"></u-skeleton>
				</view>
			</template>
			<template v-else-if="!loading && list.length === 0">
				<u-empty
				    mode="data"
					icon="http://cdn.uviewui.com/uview/empty/data.png"
				>
				</u-empty>
			</template>
			<template v-else-if="!loading && list.length > 0">
				<view class="shop-order-item" v-for="order in list" :key="order.id">
					<view class="shop-order-item-t">
						<view class="shop-order-item-t-l">
							<u--image radius="8rpx" mode="aspectFill" :src="appInfo.logo[0].url" width="38rpx" height="34rpx"></u--image>
							<view style="width: 16rpx;"/>
							<view class="shop-order-item-t-l-1 u-line-1">{{appInfo.name}}</view>
						</view>
						<view class="shop-order-item-t-r"  v-if="order.orderStatus === '0' || order.orderStatus === '1' || order.orderStatus === '4' || order.orderStatus === '-1'">
							<text class="u-border-right" style="padding-right: 16rpx;">{{order.orderStatus_dictText}}</text>
							<text @click="deleteOrder(order)" class="iconfont icon-shanchu" style="padding-left: 8rpx;"></text>
						</view>
						<view class="shop-order-item-t-r" v-else>
							<text>{{order.orderStatus_dictText}}</text>
						</view>
					</view>
					<view @click="toDetail(order)" class="shop-order-item-m">
						<u--image class="shop-order-item-m-l" radius="16rpx" mode="aspectFill" :src="order.image && order.image.split(',')[0]" width="160rpx" height="160rpx"></u--image>
						<view class="shop-order-item-m-m">
							<view class="u-line-2">{{order.ticketName}}</view>
							<view style="font-size: 24rpx;color: #333;margin-top: 16rpx;" class="u-line-2">{{order.ticketTime}}</view>
						</view>
						<view class="shop-order-item-m-r">
							<text>x{{order.buyCount}}</text>
						</view>
					</view>
					<view :class="['shop-order-item-b', order.orderStatus === '0' ? null : 'u-border-bottom']">
						<text>实付:</text>
						<text style="padding-left: 16rpx;font-size: 32rpx;color: #f40215;">&yen;{{order.payPrice}}</text>
					</view>
					<view class="shop-order-item-bb" v-if="order.orderStatus !== '0'">
						<view class="shop-order-item-bb-btn" v-if="order.orderStatus === '1'">
							<u-button @click="cancelOrder(order)" size="small" block text="取消订单" shape="circle"></u-button>
						</view>
						<view class="shop-order-item-bb-btn" v-if="order.orderStatus === '2'">
							<u-button @click="showCode(order)" size="small" plain :color="appColor" block text="二维码" shape="circle"></u-button>
						</view>
						<view class="shop-order-item-bb-btn" v-if="order.orderStatus === '2'">
							<u-button @click="refund(order)" size="small" block text="申请退款" shape="circle"></u-button>
						</view>
						<view class="shop-order-item-bb-btn" v-if="order.orderStatus === '1'">
							<u-button @click="continueToPay(order)" size="small" plain :color="appColor"  block text="立即支付" shape="circle"></u-button>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import {completeOrder, addBatch} from '@/api/shop.js';
	import {parkTicketOrder, cancelOrder, deleteOrder, continueToPay} from '@/api/me.js'
	import {mapState, mapActions} from 'vuex';
	export default {
		data() {
			return {
				current: -1,
				list1: [
					{name: '全部', key: -1},
					{name: '已取消', key: 0},
					{name: '待支付', key: 1},
					{name: '待使用', key: 2},
					{name: '已使用', key: 3},
				],
				list: [],
				loading: true,
				status: 'loadmore',
				pageNo: 1,
				pageSize: 6,
			}
		},
		computed: {
			...mapState(['appInfo']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - 44 + 'px';
			}
		},
		onShow() {
			this.getList();
		},
		methods: {
			showCode({id}) {
				let url = `/pages/me/ticketCode?id=${id}`;
				this.$cuNavigateTo(url);
			},
			// 申请退款
			refund({id, ticketRefund}) {
				if(ticketRefund === '0') {
					return this.$cuTip('此门票不支持退款');
				}
				let url = `/pages/me/ticketRefund?id=${id}`;
				this.$cuNavigateTo(url);
			},
			// 物流详情
			logistics({id}) {
				let url = `/pages/me/logistics?id=${id}`;
				this.$cuNavigateTo(url);
			},
			// 详情
			toDetail({id}) {
				let url = `/pages/me/ticketOrderDetail?id=${id}`;
				this.$cuNavigateTo(url);
			},
			// 取消订单
			cancelOrder({id}) {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '您确定取消吗?',
					confirmColor: that.appColor,
					success: function (res) {
						if (res.confirm) {
							cancelOrder({id}).then(res => {
								that.pageNo = 1;
								that.$cuTip('取消成功');
								that.getList();
							})
						}
					}
				})
				
			},
			
			// 删除订单
			deleteOrder({id}) {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '您确定删除吗?',
					confirmColor: that.appColor,
					success: function (res) {
						if (res.confirm) {
							deleteOrder(id).then(res => {
								that.$cuTip('删除成功')
								that.pageNo = 1;
								that.getList();
							})
						}
					}
				})
				
			},
			// 立即支付
			continueToPay({id}) {
				const that = this;
				continueToPay({id}).then(res => {
					const {orderId, wxPayResult: {nonceStr, packageValue, paySign, timeStamp, signType}} = res.result;
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp,
						nonceStr,
						package: packageValue,
						signType,
						paySign,
						success: function (res) {
							that.$cuTip('支付成功');
							that.pageNo = 1;
							that.getList();
						},
						fail: function (err) {
							console.log('fail:' + JSON.stringify(err));
						}
					})
				})
			},
			tabClick(item) {
				this.scrollTop = 0;
				this.current = item.key;
				this.pageNo = 1;
				this.getList();
			},
			getList() {
				if(this.pageNo === 1) {
					this.loading = true;
				}
				let postObj = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					orderStatus: this.current
				}
				if(this.current === -1) {
					delete postObj.orderStatus
				}
				parkTicketOrder(postObj).then(res => {
					const {current, pages, records} = res.result;
					if(this.pageNo === 1) {
						let empty = [];
						this.list = empty.concat(records);
					} else {
						this.list = this.list.concat(records);
					}
					if(current >= pages) {
						this.status = 'nomore'
					} else {
						this.status = 'loading'
						this.pageNo ++;
					}
				}).finally(() => {
					this.loading = false;
				})
			},
			onLower() {
				if(this.status === 'loading') {
					this.getList();
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}
	
	.rect {
		width: 80%;
		height: 800rpx;
		background-color: #fff;
	}
	.shop-order-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin: 32rpx atuto;
		.shop-order-item-t {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.shop-order-item-t-l {
				display: flex;
				align-items: center;
				width: calc(100% - 200rpx);
				.shop-order-item-t-l-1 {
					color: #000;
					line-height: 30rpx;
					font-size: 30rpx;
				}
			}
			.shop-order-item-t-r {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				line-height: 28rpx;
				color: #666;
			}
		}
		.shop-order-item-m {
			margin: 32rpx 0;
			height: 160rpx;
			display: flex;
			align-items: center;
			.shop-order-item-m-m {
				width: calc(100% - 208rpx);
				font-size: 28rpx;
				color: #333;
				padding-left: 16rpx;
				box-sizing: border-box;
			}
			.shop-order-item-m-r {
				width: 48rpx;
				display: flex;
				color: #666;
				align-items: center;
				justify-content: flex-end;
				font-size: 28rpx;
			}
		}
		.shop-order-item-b {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 28rpx;
			line-height: 28rpx;
			color: #333;
			padding-bottom: 32rpx;
			margin-bottom: 32rpx;
		}
		.shop-order-item-bb {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.shop-order-item-bb-btn {
				width: 160rpx;
				margin-left: 16rpx;
			}
		}
	}
</style>